<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('新增产品管理')" />
</head>
<body class="white-bg">
	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
		<form class="form-horizontal m" id="form-manager-add">
			<div class="form-group">
				<label class="col-sm-3 control-label">型号：</label>
				<div class="col-sm-8">
					<input class="form-control" type="text" name="managerNum" id="managerNum" required>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">品名：</label>
				<div class="col-sm-8">
					<input id="managerName" name="managerName" class="form-control">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">类别：</label>
				<div class="col-sm-8">
					<input id="managerCategory" name="managerCategory" class="form-control">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">系列：</label>
				<div class="col-sm-8">
					<select class="form-control" name="seriesId">
						<option th:each="series:${series}" th:value="${series.seriesId}">[[${series.seriesName}]]</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">风格：</label>
				<div class="col-sm-8">
					<select class="form-control" name="styleId">
						<option th:each="style:${style}" th:value="${style.styleId}">[[${style.styleName}]]</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">规格：</label>
				<div class="col-sm-8">
					<select class="form-control" name="specificationId">
						<option th:each="specification:${specification}" th:value="${specification.specificationId}">[[${specification.specificationName}]]</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">材质：</label>
				<div class="col-sm-8">
					<input id="managerTexture" name="managerTexture" class="form-control">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">产地：</label>
				<div class="col-sm-8">
					<input id="managerAddress" name="managerAddress" class="form-control">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">单价：</label>
				<div class="col-sm-8">
					<input id="managerNuitPrice" name="managerNuitPrice" class="form-control">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">数量：</label>
				<div class="col-sm-8">
					<input id="managerCount" name="managerCount" class="form-control">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">金额：</label>
				<div class="col-sm-8">
					<input id="managerTotalPrice" name="managerTotalPrice" class="form-control">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">进口家具在途：</label>
				<div class="col-sm-8">
					<input id="managerTransportation" name="managerTransportation" class="form-control">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">备注：</label>
				<div class="col-sm-8">
					<input id="managerDesc" name="managerDesc" class="form-control">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">图片选择：</label>
				<div class="col-sm-8">
					<select class="form-control" name="urlId" onchange="imagesNodeId(this)">
						<option>请选择图片</option>
						<option th:each="url:${url}" th:value="${url.urlId}">[[${url.urlId}]]</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label"></label>
				<div class="col-sm-8" id="imagesDivId">

				</div>
			</div>

		</form>
	</div>
	<th:block th:include="include :: footer" />
	<script type="text/javascript">
		var prefix = ctx + "product/manager";
	    
		$("#form-manager-add").validate({
			onkeyup: false,
			rules:{
				managerNum:{
					remote: {
		                url: prefix + "/checkManagerNumUnique",
		                type: "post",
		                dataType: "json",
		                data: {
		                	"managerNum" : function() {
		                        return $.common.trim($("#managerNum").val());
		                    }
		                },
		                dataFilter: function(data, type) {
		                	return $.validate.unique(data);
		                }
		            }
				},
				managerId:{
					digits:true
				},
			},
			messages: {
		        "managerNum": {
		            remote: "产品管理型号已经存在"
		        }
		    },
		    focusCleanup: true
		});
		
		function submitHandler() {
	        if ($.validate.form()) {
	        	$.operate.save(prefix + "/add", $('#form-manager-add').serialize());
	        }
	    }


		function imagesNodeId(obj) {
			$.ajax({
				url: prefix + "/changeImagesUrl",
				data:{urlId:obj.value},
				dataType:"json",
				type:"post",
				async:"true",
				success:function (data) {
					if(data.code == 0){
						$("#imagesDivId").empty();
						// $("#urlSrcId").attr("src",data.data.urlSrc);
						$("#imagesDivId").append("<img src=\""+data.data.urlSrc+"\" width=\"300px\" height=\"300px\">")
						$("#imagesDivId").attr("value",data.data.urlId);
					}else {
						console.log(data.msg);
					}
				}
			});
		}
	</script>
</body>
</html>
